<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>河北电信智慧运营</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=a">   <!-- IE5 mode -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="<%=path%>/static/bootstrap3/bootstrap.min.css">
    <link rel="stylesheet" href="<%=path%>/static/css/u/home.css">
    <link rel="stylesheet" href="<%=path%>/static/css/u/extension.css">

</head>
<body>

<!-- 头部 -->
<div class="row head">
    <div class="col-xs-3">
        <img class="logo" src="<%=path%>/static/img/alogo1.png" alt="" height="60">
    </div>
    <div class="col-xs-6 text-center">
        <h2 class="title" id="title">河北电信智慧运营</h2>
    </div>
    <div class="col-xs-3 systime-layout">
        <span class="col-xs-4 systime-font">系统时间:</span>
        <span class="col-xs-8 systime-font-content" id="show">&nbsp;</span>
        <span class="col-xs-4 systime-font">
            区域:
        </span>
        <span class="col-xs-8 systime-font-content">
            <select id="select" class="systime-select" onchange="ajaxS(this.value)">
            <option value="">全部</option>
            <%--<c:forEach items="${areaNames}" var="item">
                <option value="${item.areaName}">${item.areaName}</option>
            </c:forEach>--%>
        </select>
        </span>
    </div>
</div>
<!-- 内容部门 -->
<div class="row content">
    <!-- 第一列 （左侧） -->
    <div class="col-xs-4 pr10">
        <!-- 4G用户数/流量数 -->
        <div class="card col-xs-12 p0">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">
                    4G用户数/流量数
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="left1" class="zhexiantu" style="margin-top: 30px;"></div>
        </div>
        <!-- 区域内小区总数/故障小区数 -->
        <div class="card col-xs-6 c-layout-r">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle"
                     style="">
                    区域内小区总数/故障小区数
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="left2_2" class="zhexiantu" style="padding-top: 30px;"></div>
        </div>
        <!-- TOP流量小区 -->
        <div class="card col-xs-6 c-layout-l">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">
                    TOP流量小区
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="left2_1" class="zhexiantu"></div>
        </div>
        <!-- 4G业务类型流量占比 -->
        <div class="card col-xs-6 c-layout-r">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">
                    4G业务类型流量占比
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="left3_1" class="zhexiantu" style="padding-top: 30px;"></div>
        </div>
        <!-- G业务类型数量占比 -->
        <div class="card col-xs-6 c-layout-l">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">
                    4G业务类型数量占比
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="left3_2" class="zhexiantu" style="padding-top: 30px;"></div>
        </div>
    </div>
    <!-- 第二列 （地图） -->
    <div class="col-xs-4" style="padding: 0px;margin-top: -5px;">
        <!-- 信息展示 -->
        <div class="linear c-box">
            <div style="margin-top: 5px;">
                <div class="col-xs-6 c-box-div">
                    <div class="col-xs-12 imptitle12 c-box-text">
                        4G实时用户
                    </div>
                    <div class="col-xs-12 shuzi">
                        <%--<div class="line">&nbsp;</div>--%>
                        <span id="my1"></span>
                    </div>
                </div>
                <div class="col-xs-6 c-box-div-r">
                    <div class="col-xs-12 imptitle12 c-box-text">
                        4G实时流量(MB)
                    </div>
                    <div class="col-xs-12 shuzi">
                        <%--<div class="line">&nbsp;</div>--%>
                        <span id="my2"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 地图iframe -->
        <iframe id="J_iframe" class="J_iframe" name="iframe0" width="100%" height="640" frameborder="0" seamless>
        </iframe>
    </div>
    <!-- 第三列 （右侧） -->
    <div class="col-xs-4 pl10">
        <!-- 游戏交互时延优良率 -->
        <div class="card col-xs-6 c-layout-r-p0">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">游戏交互时延优良率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right1_1" class="zhexiantu1"></div>
        </div>
        <!-- 即时通信消息发送成功率 -->
        <div class="card col-xs-6 c-layout-l-p0">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">
                    即时通信消息发送成功率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right1_2" class="zhexiantu1"></div>
        </div>
        <!-- 视频卡顿频率 -->
        <div class="card col-xs-6 c-layout-r">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">视频卡顿频率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right2_1" class="zhexiantu1"></div>
        </div>
        <!-- 视频下载优良率 -->
        <div class="card col-xs-6 c-layout-l">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">视频下载优良率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right2_2" class="zhexiantu1"></div>
        </div>
        <!-- 网页首屏优良率 -->
        <div class="card col-xs-6 c-layout-r">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">网页首屏优良率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right3_1" class="zhexiantu1"></div>
        </div>
        <!-- 网页打开优良率 -->
        <div class="card col-xs-6 c-layout-l">
            <div class="box-card">
                <div class="col-xs-2 box-head">
                    &nbsp;
                </div>
                <div class="col-xs-8 imptitle">网页打开优良率
                </div>
                <div class="col-xs-2 box-head-r">
                    &nbsp;
                </div>
            </div>
            <div id="right3_2" class="zhexiantu1"></div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="row foot">中国电信股份有限公司河北分公司</div>


<script src="<%=path%>/static/bootstrap3/jquery.js"></script>
<script src="<%=path%>/static/bootstrap3/bootstrap.min.js"></script>
<script src="<%=path%>/static/bootstrap3/echarts.js"></script>
<script src="<%=path%>/static/js/u/home.js"></script>
<script>


</script>
</body>
</html>